display: grid
段組みするcss property
grid
まとめて指定できるやつ
flexと同じ
grid-template
列数、行数、サイズ、areaの名前を指定する
AAっぽく指定できてわかりやすい
https://zenn.dev/kagan/articles/4f96a97aadfcb8#8.-複雑なレイアウト display: grid#660d16361280f0000075830e
code:css
.ComplexGrid {
display: grid;
/* エリア名の文字数が合わないときは、スペースを入れて各列のおしりを揃えると見やすい */
grid-template:
'Alpha Beta Beta' 80px
'Alpha . Gamma' 80px
'Alpha Delta Gamma' auto /
40% 80px 1fr;
gap: 4px;
}
.は無名のarea
https://zenn.dev/kagan/articles/4f96a97aadfcb8#エリアに名前を付ける-grid-template-areas-と-grid-area
個別に設定する
grid-template-rows
grid-template-columns
grid-template-areas
併用できないことに注意
https://stackoverflow.com/questions/47039979/css-grid-repeatable-grid-template-areas
配置指定
grid-columnとgrid-row
1/3で1から3番目の領域を使う
1/-1で1番目から末尾までの領域を使う
frでサイズを相対指定する
幅/高さ未指定の子要素の合計幅/高さをfrの合計で割ったもの
https://webst8.com/blog/css-display-grid/#st-toc-h-7display: grid#660d18d51280f00000758312
折り返し表示
repeat()関数を使ってrepeat(auto-fit, minmax(<rem>, 1fr))とする
/mrsekut-p/自動で折り返し、良い感じに幅が伸縮するリストを作る
幅に収まる数だけ並べる-repeat(auto-fit,-〇〇) | 【CSS】gridでできるこんなレイアウト10選（grid関連プロパティ総ざらい）display: grid#660d16361280f0000075830e
これをgrid-templateに入れる
意味
各gridの(高さ|幅)の最小値を<rem>とする
もし余白があれば、その分だけ引き伸ばす
余白が<rem>未満であれば、入り切らないアイテムを次の(行|列)に折り返す
折り返さないときに、要素サイズを引き伸ばしたくなければ、auto-fitの代わりにauto-fillを使う
repeat(auto-fit, minmax(min(100%), <rem>), 1fr))とすると、親要素が<rem>より狭い時、親要素に要素サイズを合わせてくれる
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-minmax.html#h205
grid－CSSリファレンス
/mrsekut-p/Grid Layout
【CSS】gridでできるこんなレイアウト10選（grid関連プロパティ総ざらい）
グリッドを使用したよくあるレイアウトの実現 - CSS: カスケーディングスタイルシート | MDN
【CSS グリッドレイアウト】display: gridの使い方 - WEBST8のブログ
図解が丁寧
#2024-05-01 01:26:23
#2024-04-03 17:38:25